<template>
	<view>
    <div class="page-content flex-c" :style="{ height: screenHeight + 'px' }">
      <view class="content flex_center">
        <view class="cont">
          <image class="cont_bg" :style="{ width: bgW + 'px' }" mode="heightFix"
            src="https://content.daylucky.cn/admin/image/yh0f7gj55gwuumahqj8le0mq.gif" />
          <view class="cont_bg1" :style="{ width: bg1W + 'px' }"></view>
        </view>
      </view>
      <div class="footer flex_b_c flex_a_c">
        <img @click="onLink" src="http://content.daylucky.cn/admin/image/78w6g01ialf6p3b7numwh0h7.png" alt="">
        <img @click="owned = false, isShow = true" src="http://content.daylucky.cn/admin/image/gh1jz3ax1cafxu5fxghcht2r.png" alt="">
      </div>
      <modifyInfo :isShow.sync="isShow" :owned="owned" @on-success="onModify" />
    </div>
	</view>
</template>
<script>
import modifyInfo from "@/components/v2/modifyInfo"
import onLogin from '@/utils/login'
export default {
	components: { modifyInfo },
	name: 'index',
	data() {
		return {
			isShow: false,
			bgW: 0,
			bg1W: 0,
			owned: false
		}
	},
	onShow() {
		if (!this.$storage.hasStorage('access_token')) {
			onLogin()
		}
	},
	onShareAppMessage() {
		return {
			title: '魔镜魔镜告诉我',
			path: '/pages/v2/home/index',
			imageUrl: "",//自定义图片的地址
			success(res) {
			},
			fail(err) { console.log(err) }
		}
	},
	mounted() {
		this.getDomClientRect()
	},
	methods: {
		getDomClientRect() {
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.cont_bg1').boundingClientRect((rect) => {
					this.bg1W = 629 / 1119 * rect.height
					console.log('元素高度为：' + rect.height, this.bg1W)
				}).exec()
				uni.createSelectorQuery().in(this).select('.cont_bg').boundingClientRect((rect) => {
					this.bgW = 123 / 253 * rect.height
					console.log('元素高度为：' + rect.height, this.bgW)
				}).exec()
			})
		},
    onLink() {
			if (!this.$storage.getStorage('self_nick_name')) {
				this.owned = true
				this.isShow = true
			} else {
        uni.navigateTo({
          url: '/pages/v2/landPage/index'
        })
			}
		},
		onModify() {
			uni.navigateTo({
				url: '/pages/v2/landPage/index?owned=' + this.owned 
			})
		},


	}
}
</script>
<style lang="scss">
.page-content {
	// width: 100%;
	// height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	.content {
		background: url('https://content.daylucky.cn/admin/image/zdbt5v95lvd6kcdov8xt0xvh.png') no-repeat left bottom/ 100% 100%;
		width: 100%;
		overflow: hidden;
		flex: 1;

		// display: flex;
		// height: calc(100vh - 186rpx - env(safe-area-inset-bottom));
		.cont {
			// width: 629rpx;
			// height: 1119rpx;
			width: 100%;
			height: 100%;
			position: relative;

			.cont_bg {
				display: block;
				position: absolute;
				// width: 410rpx;
				// height: 790rpx;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -45%);
				height: 62%;
				width: auto;
				// background: url(https://content.daylucky.cn/admin/image/yh0f7gj55gwuumahqj8le0mq.gif) no-repeat left top/ cover;
				// aspect-ratio: 120 / 253;
				-webkit-clip-path: ellipse(41% 50% at 50% 50%);
				overflow: hidden;
				clip-path: ellipse(42% 50% at 50% 50%);
			}

			.cont_bg1 {
				position: absolute;
				background: url('https://content.daylucky.cn/admin/image/uhh6oxnhzxo7974p30xbyaqt.png') no-repeat top left/ cover;
				// width: 100%;
				// height: 100%;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -48%);
				height: 82%;
				width: auto;
				// aspect-ratio: 629 / 1119;
			}
		}
	}

	 .footer {
    width: 100%;
    height: calc(186rpx + env(safe-area-inset-bottom));
    position: relative;
    padding-top: 26rpx;
    padding-left: 40rpx;
    padding-right: 40rpx;
    background: url('https://content.daylucky.cn/admin/image/bxp37p4iptpwsftbmljr8csf.png') no-repeat left top/ cover;
    img {
      width: 320rpx;
      height: 104rpx;
    }
    // .take_btn {
    //   width: 213px;
    //   height: 55px;
    //   background: url('https://content.daylucky.cn/admin/image/evapz3lu7vughofyp0j7wbpj.png') no-repeat left top/ cover;
    // }
  }
}

</style>


